Greptile Summary

A thorough UI polish pass across 37 components applying consistent improvements: specific transition-* properties replacing transition-all, tabular-nums on every dynamically-updating number, text-balance/text-pretty on headings and descriptions, active:scale-[0.96] press feedback on buttons, expanded hit areas via pseudo-elements, a concentric border-radius fix on flow nodes, and a new optional pulse prop on StatusDot. Also includes a Next.js patch bump (16.1.6 → 16.1.7).

• All transition, tabular-nums, text-balance/pretty, overflow-hidden, shadow, and outline changes are correct and well-scoped.
• active:scale-[0.96] + active:!scale-100 on the link variant — the !important override is valid and works as intended in Tailwind v4.
• Hit-area pseudo-elements (before:absolute before:-inset-*) — relative positioning is correctly present on all affected parents.
• StatusDot pulse animation has a color bug — @keyframes status-pulse uses currentColor for the box-shadow color, but StatusDot only sets background-color (via bg-status-*); color is never set to the status hue. CSS animations override regular property declarations, so the shadow-[0_0_0_0_var(--status-*)] Tailwind utilities in pulseStyles are dead code during the animation. The expanding glow ring will render in the inherited foreground text color rather than the intended status color (green/amber/red). Adding text-[var(--status-*)] to each pulseStyles entry is the minimal fix — it sets color without affecting the dot's visible background.

Confidence Score: 4/5

• Safe to merge after fixing the StatusDot pulse ring color — all other changes are correct and well-executed.
• 37-file polish pass is clean throughout. The single concrete bug is confined to the new pulse prop on StatusDot: the animation's currentColor resolves to the wrong value, making the glow ring the wrong color. It's a one-line-per-variant fix and has no impact on any other changed code.
• src/components/ui/status-dot.tsx (pulse color bug) and src/app/globals.css (keyframe using currentColor)

Important Files Changed

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[StatusDot pulse=true] --> B{variant?}
    B -->|healthy/degraded/error| C["Apply pulseStyles class\n(shadow-[0_0_0_0_var(--status-*)] + animate-[status-pulse])"]
    B -->|neutral/info| D[No pulse — empty string]

    C --> E["CSS animation runs\n@keyframes status-pulse"]
    E --> F["0%/100%: box-shadow 0 0 0 0 currentColor\n50%: box-shadow 0 0 4px transparent"]

    F --> G{What is currentColor?}
    G -->|Expected| H["var(--status-healthy/degraded/error)\n✅ Status-colored ring"]
    G -->|Actual| I["Inherited text color (foreground)\n❌ Wrong color ring"]

    I --> J["shadow-[0_0_0_0_var(--status-*)] Tailwind\nclass is overridden by animation\n— dead code"]

    style I fill:#ef4444,color:#fff
    style H fill:#22c55e,color:#fff
    style J fill:#f97316,color:#fff

This is a comment left during a code review.
Path: src/components/ui/status-dot.tsx
Line: 13-19

Comment:
**Pulse ring renders in the wrong color**

The `@keyframes status-pulse` animation in `globals.css` uses `currentColor` for the box-shadow:

```css
0%, 100% { box-shadow: 0 0 0 0 currentColor; }
50%       { box-shadow: 0 0 0 4px transparent; }
```

CSS animations override regular property declarations, so this keyframe completely replaces the `shadow-[0_0_0_0_var(--status-healthy)]` Tailwind utility on the element. `currentColor` resolves to the CSS `color` property — but `StatusDot` only sets `background-color` (via `bg-status-*`); it never sets `color`. As a result, the expanding ring will be the inherited *text* color (e.g. neutral gray), not the status color (green / amber / red).

The `shadow-[0_0_0_0_var(--status-*)]` entries in `pulseStyles` are dead code while the animation is running.

**Fix:** add `color: var(--status-*)` to the element so that `currentColor` resolves to the right hue:

```suggestion
const pulseStyles: Record<StatusVariant, string> = {
  healthy: "text-[var(--status-healthy)] animate-[status-pulse_2s_ease-in-out_infinite]",
  degraded: "text-[var(--status-degraded)] animate-[status-pulse_2s_ease-in-out_infinite]",
  error: "text-[var(--status-error)] animate-[status-pulse_1.5s_ease-in-out_infinite]",
  neutral: "",
  info: "",
};
```

Setting `color` via `text-[var(--status-*)]` won't change the dot's visible colour (that comes from `background-color`), but it makes `currentColor` resolve to the correct value inside the keyframe.

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "polish: improve UI feel across the board" | Re-trigger Greptile}